<script setup>
import {onBeforeMount, ref, provide} from 'vue'
import {getProductCategoryAllAPI} from "@/api/product.js";
import LogoAndSearchNav from "@/components/LogoAndSearchNav.vue";
import CategoryListMenu from "@/views/category/components/CategoryListMenu.vue";
import CategoryList from "@/views/category/components/CategoryList.vue";

// 商品分类数据
const category = ref([])
const categoryListActive = ref(0)
onBeforeMount(async () => {
  category.value = await getProductCategoryAllAPI()
})
provide('category', {category, categoryListActive})
</script>

<template>
  <div class="h-full">
    <LogoAndSearchNav></LogoAndSearchNav>
    <el-container>
      <el-aside class="aside bg-white dark:bg-neutral-950" width="5rem">
        <CategoryListMenu></CategoryListMenu>
      </el-aside>
      <el-main class="">
        <CategoryList :category-list="category[categoryListActive]?.subs"
                      :category-id="category[categoryListActive]?.id"
                      :category-name="category[categoryListActive]?.name"
        ></CategoryList>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.aside {
  min-height: calc(100vh - 46px);
}
</style>